<template>
  <div class="picker_box">
    <el-date-picker
      :editable="false"
      v-if="section == 'one'"
      v-model="value"
      :type="type"
      :placeholder="'选择' + title"
      :value-format="format"
      :clearable="false"
      @input="change($event)"
    >
    </el-date-picker>

    <el-date-picker
      :editable="false"
      v-if="section == 'two'"
      v-model="value"
      :type="type"
      :clearable="false"
      :value-format="format"
      range-separator="至"
      :start-placeholder="'开始' + title"
      @input="change($event)"
      :end-placeholder="'结束' + title"
    >
    </el-date-picker>
    <el-date-picker
      :editable="false"
      :clearable="false"
      v-if="section == 'week'"
      :type="type"
      :placeholder="'选择' + title"
      v-model="value"
      :format="format"
      @input="change($event)"
    ></el-date-picker>
  </div>
</template>

<script>
/*
单个日期： date
单个月份： month
单个年份： year
多个日期： daterange
多个月份： monthrange
多个日期+时间： datetimerange
*/
export default {
  name: "DatePicker", //时间选择器，只可以选择1个月以内的
  props: {
    type: {
      type: String,
      default: "month",
    },
    //是否自动转区间
    isrRegion: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: null,
      title: "",
      format: "",
      section: false, //是否是区间
      Timer: [],
      startTimeNum: "",
      endTimeNum: "",
    };
  },
  created() {
    if (this.type == "month") {
      this.title = "月份";
      this.value = "";
      this.format = "yyyy-MM";
      this.section = "one";
    } else if (this.type == "year") {
      this.title = "年份";
      this.value = "";
      this.format = "yyyy";
      this.section = "one";
    } else if (this.type == "date") {
      this.title = "日期";
      this.value = "";
      this.format = "yyyy-MM-dd";
      this.section = "one";
    } else if (this.type == "week") {
      this.title = "周";
      this.value = "";
      this.section = "week";
      this.format = "yyyy年第WW周";
    } else if (this.type == "daterange") {
      this.title = "日期";
      this.value = [];
      this.format = "yyyy-MM-dd";
      this.section = "two";
    } else if (this.type == "monthrange") {
      this.title = "月份";
      this.value = [];
      this.format = "yyyy-MM";
      this.section = "two";
    } else if (this.type == "datetimerange") {
      this.title = "日期";
      this.value = [];
      this.section = "two";
      this.format = "yyyy-MM-dd HH:mm:ss";
    }
  },
  mounted() {
    //  this.changeweek();
  },
  methods: {
    change(val) {
      if (this.type == "week") {
        this.changeweek(val);
      } else {
        if (this.isrRegion == true) {
          if (this.type == "year") {
            this.changeyear(val);
          }
          if (this.type == "month") {
            this.changemonth(val);
          }
        } else {
          this.$emit("dateSelect", val);
        }
      }
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    changeweek(val) {
      if (val) {
        var todayDay = new Date(val);
      } else {
        var todayDay = new Date();
      }
      this.Timer = [];
      let todayOfWeek = todayDay.getDay();
      let spendDay = 1;
      if (todayOfWeek != 0) {
        spendDay = 7 - todayOfWeek;
      }
      this.startTimeNum = todayDay.valueOf() - (6 - spendDay) * 86400000;
      this.endTimeNum = todayDay.valueOf() + spendDay * 86400000;
      let startTimeStr = this.timestampToTime(this.startTimeNum); // 时间戳转字符串
      let endTimeStr = this.timestampToTime(this.endTimeNum);
      this.Timer.push(startTimeStr);
      this.Timer.push(endTimeStr);
      this.$emit("dateSelect", this.Timer);
    },
    changeyear(val) {
      this.Timer = [];
      this.Timer.push(val + "-01-01");
      this.Timer.push(val + "-12-31");
      this.$emit("dateSelect", this.Timer);
    },
    changemonth(val) {
      this.Timer = [];
      this.Timer.push(val + "-01");
      var year = val.substr(0, 4);
      var month = val.substr(5, 6);
      if (
        month == "01" ||
        month == "03" ||
        month == "05" ||
        month == "07" ||
        month == "08" ||
        month == "10" ||
        month == "12"
      ) {
        this.Timer.push(val + "-31");
      }
      if (month == "04" || month == "06" || month == "09" || month == "11") {
        this.Timer.push(val + "-30");
      }
      if (month == "02") {
        if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
          this.Timer.push(val + "-29");
        } else {
          this.Timer.push(val + "-28");
        }
      }
      this.$emit("dateSelect", this.Timer);
    },
  },
};
</script>
<style lang="scss">
</style>